<template>
    <div>
        <img src="@/images/bar.png" alt="bar">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="float: left;">登录</span>
            </div>
            <el-form
                :rules="rules" ref="login" :model="loginInfo" label-width="80px" label-position="left">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="loginInfo.account" placeholder="请输入您的账号(＞﹏＜)"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginInfo.password" placeholder="请输入您的密码(＞﹏＜)"
                              @keyup.enter.native="login" show-password></el-input>
                </el-form-item>
                <el-form-item label-width="0">
                    <span style="float: left;">
                        <el-tooltip class="item" effect="dark" content="建议不是自己的电脑上不要勾选此项哦" placement="top-start">
                            <el-checkbox v-model="rememberMe" :checked="rememberMe">记住我</el-checkbox>
                        </el-tooltip>
                    </span>
                    <router-link style="float: right;" to="/back">忘记密码了？点我找回</router-link>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button class="btn-width" style="float: left;" type="primary"
                               @click="login">登录
                    </el-button>
                    <el-button class="btn-width" style="float: right;" @click="goToRegister">注册账号
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    import { setCookie, getCookie, removeCookie } from '@/utils/cookie'

    export default {
        name: 'Login',
        data () {
            return {
                loginInfo: {
                    account: '',
                    password: ''
                },
                rules: {
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { type: 'email', message: '账号格式错误，是Email地址哦', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', message: '密码格式错误', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                    ]
                },
                rememberMe: false
            }
        },
        beforeMount () {
            let account = getCookie('account')
            if (account) {
                this.loginInfo.account = account
            }
            let rememberMe = getCookie('rememberMe')
            this.rememberMe = rememberMe ? rememberMe === 'true' : false
        },
        mounted () {
            let query = this.$route.query
            if (query) {
                if (query.register === 'true') {
                    this.$message.success('注册成功')
                }
            }
        },
        methods: {
            ...mapActions('user', {
                loginAction: 'login'
            }),
            goToRegister () {
                this.$router.push('/register')
            },
            login () {
                this.$refs['login'].validate((valid) => {
                    if (valid) {
                        this.action(this.loginAction(this.loginInfo), data => {
                            if (this.rememberMe) {
                                setCookie('account', this.loginInfo.account, 24 * 60 * 60 * 1000 * 7)
                                setCookie('rememberMe', this.rememberMe, 24 * 60 * 60 * 1000 * 7)
                            } else {
                                removeCookie('account')
                                removeCookie('rememberMe')
                            }
                            this.$router.push('/')
                        })
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    img {
        margin: 0 0;
        width: 100%;
        height: 150px;
    }

    .clearfix {
        font-size: 24px;
        font-weight: bolder;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .el-icon-close {
        font-size: 24px;
    }

    .box-card {
        width: 480px;
        margin: 60px auto;
        position: page;
    }

    .btn-width {
        width: 200px;
    }

    .prompt-text {
        color: #bbbbbb;
    }
</style>
